<template>
 <div>
      <h1>租赁计划</h1>

    <el-form
      :model="leasePlan"
      label-width="80px"
      :label-position="lablePosition"
      class="forma"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="日期">
            <el-input
              v-model="leasePlan.fillDate"
              style="width: 350px"
              type="date"
              
            ></el-input>
          </el-form-item>
        </el-col>
    
        <el-col :span="8">
          <el-form-item label="租赁计划名称">
            <el-input
              v-model="leasePlan.planName"
              style="width: 350px"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-input
              v-model="leasePlan.projectName"
              style="width: 350px"
              @focus="ProjectName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="填报人">
            <el-input
              v-model="leasePlan.fillUser"
              style="width: 350px"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="用途">
            <el-input type="textarea" v-model="leasePlan.useTo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="附件">
           <el-form-item label="相关文件:">
    <el-upload
            name="multipartfile"
            action="http://localhost/upload"
            :headers="{token:this.$store.state.token}"
            :data="{folder:'leasePlan'}"
            class="upload-demo"
            ref="upload"
            :limit="1"
            :multiple="false"
            :auto-upload="false"
            :on-success="handleUploadSuccess">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </el-upload>
</el-form-item>
<el-input v-model="leasePlan.attachIds" v-show="false"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
     <el-button @click="add">新增</el-button>
     <el-button @click="onsubmit">立即创建</el-button>
      <el-button @click="del">删除一行</el-button>
      <el-form >
        <el-table :data="leasePlanDetails" >
          <el-table-column >
            <template slot="header">
              <p>租赁物品<span style="color: red; font-size: 16px">*</span></p>
            </template>
            <template slot-scope="scope">
              <el-form-item>
                <el-input
                  v-model="scope.row.id"
                  @focus="article"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot="header">
              <p>规格型号<span style="color: red; font-size: 16px">*</span></p>
            </template>
            <template slot-scope="scope">
              <el-form-item>
                <el-input v-model="scope.row.unitModel"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot="header">
              <p>单位<span style="color: red; font-size: 16px">*</span></p>
            </template>
            <template slot-scope="scope">
              <el-form-item>
                <el-input v-model.number="scope.row.unit"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot="header">
              <p>数量<span style="color: red; font-size: 16px">*</span></p>
            </template>
            <template slot-scope="scope">
              <el-form-item>
                <el-input
                  v-model.number="scope.row.count"
                  type="number"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot="header">
              <p>
                计划进场日期<span style="color: red; font-size: 16px">*</span>
              </p>
            </template>
            <template slot-scope="scope">
              <el-form-item>
                <el-input
                  v-model="scope.row.planStartDate"
                  type="date"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot="header">
              <p>
                计划退场日期<span style="color: red; font-size: 16px">*</span>
              </p>
            </template>
            <template slot-scope="scope">
              <el-form-item>
                <el-input
                  v-model.number="scope.row.planEndDate"
                  type="date"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot="header">
              <p>租赁天数<span style="color: red; font-size: 16px">*</span></p>
            </template>
            <template slot-scope="scope">
              <el-form-item>
                <el-input
                  v-model.number="scope.row.leaseDays"
                  type="number"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
        <el-dialog :visible.sync="projectTableVisible">
    
      <project-info-list v-on:row="row" v-if="projectTableVisible"></project-info-list>
       
    </el-dialog>
    <el-dialog :visible.sync="materTableVisible"> 
     <material-list  v-on:checked="checked"></material-list>
    </el-dialog>
 </div>
</template>

<script>

//使用项目明细组件
import ProjectInfoList from '../common/projectInfo/ProjectInfoList.vue';
//使用材料明细组件
import MaterialList from '../common/material/MaterialList.vue'

import LeasePlan from '../../model/hyh/LeasePlan.js'
const lp=new LeasePlan()
export default {
  components: { ProjectInfoList, MaterialList },
    component:{
    ProjectInfoList,
    MaterialList
    },
  data() {
    return {
        active:1,
      headers: { token: sessionStorage.getItem("token") },
      uploadUrl: "http://localhost/upload",
      leasePlan: {
          pId:''
      },
      lablePosition: "top",
      leasePlanDetails: [
       
      ]
        
      

      ,
      
      projectTableVisible: false,
      materTableVisible: false,
      girData: [],
    };
  },
   methods: {
       checked(checked){
        this.materTableVisible=false
        this.leasePlanDetails=checked
        console.log(this.leasePlanDetails)
       },
         row(row){
                this.projectTableVisible=false
                this.leasePlan.projectName=row.projectName
                this.leasePlan.pId=row.id
                console.log(this.leasePlan.pId)
            },
      //查询项目信息
    ProjectName() { 
       
      this.projectTableVisible = true;
    },
 submitUpload(){
    this.$refs.upload.submit();
},
handleUploadSuccess(response){
this.leasePlan.attachIds = response;// 这个就是返回的oss保存url
},
    add() {
      this.leasePlanDetails.push({
        name: "",
        age: "",
        height: "",
        other: "",
      });
    },
    del(index) {
      this.leasePlanDetails.splice(index, 1);
    },
    article() {
      this.materTableVisible = true;
    },
   //添加租赁计划与明细
   onsubmit(){
    //    lp.addLeasePlan(this.leasePlan).then(()=>{
          
    //    })
       lp.addLeasePlanDetails(this.leasePlanDetails).then(()=>{

       })
        this.$message("添加成功")
    //    console.log(this.leasePlan)
       console.log(this.leasePlanDetails)
   }
  },
  created(){

  }
}
</script>

<style>

</style>